<!DOCTYPE HTML>
<html>
<head>
<title>个人博客</title>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--remove-->
<script src="js/jquery-1.11.0.min.js"></script>

<script>
	$(document).ready(function(c) {
	$('.close').on('click', function(c){
		$('.header').fadeOut('slow', function(c){
	  		$('.header').remove();
		});
	});
	//登录
	$("#login").click(function () {
	    $.ajax({
			url:"/Login",
			type:"post",
			dataType:"text",
			data:{
			    username:$("#username").val(),
				password:$("#password").val()
			},
			success:function (data) {
			    //alert(data);
			   if(data=="no")
				{
                    $("#no").text("用户名错误或密码错误");
				}else if(data=="ok")
			   {
                   location.href="/blog.html";
			   }
				else
				{
                    location.href="/index.html";
				}
            },
            error:function (data) {
				alert("发生错误:"+data.status);
            }
		})
    })
		//查看数据库用户名
	$("#regusername").blur(function () {
	    if($("#regusername").val()!=""&&$("#regusername").val()!=null)
		{
            $.ajax({
                url:"/RegistUserName",
                type:"get",
                dataType:"text",
                data:{
                    username:$("#regusername").val(),
                },
                success:function (data) {
                    if(data=="no")
                    {
                        $("#regusername").val("");
                        $("#Isusername").text("用户名已被占用，请重新输入")
                    }else
					{
                        $("#Isusername").text("");
					}
                },
                error:function (data) {
                    alert("发生错误:"+data.status);
                }
            })
		}else
		{
            $("#Isusername").text("禁止为空");
		}
    })
        var retemail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        $("#regemail").blur(function () {
            if(retemail.test($("#regemail").val()))
            {
                $("#Isemail").text("");
            }else
			{
                $("#Isemail").text("邮箱格式不正确");
			}
        })
		$("#conpass").blur(function () {
		    var pass=$("#regpassword").val();
            var conpass=$("#conpass").val();
		    if(pass!=""&&pass!=null)
			{
			    if(pass==conpass)
				{
                    $("#Isconpass").text("");
				}else
				{
                    $("#Isconpass").text("两次密码不一致");
				}
			}
        })
		//注册
		$("#regist").click(function () {
            //console.log($("#Isusername").val()=="");
			if($("#regusername").val()!=""&&$("#regpassword").val()!=""&&$("#regemail").val()!=""&&$("#conpass").val()!="")
			{
                if($("#Isusername").val()==""&&$("#Isemail").val()==""&&$("#Isconpass").val()=="")
                {
                    $.ajax({
                        url:"/Regist",
                        type:"post",
                        dataType:"text",
                        data:{
                            username:$("#regusername").val(),
                            password:$("#regpassword").val(),
                            email:$("#regemail").val(),
                        },
                        success:function (data) {
                            if(data=="ok")
                            {
                                alert("注册成功");
                                location.href="/login.html";
                            }else
                            {
                                alert("注册失败");
                            }
                        },
                        error:function (data) {
                            alert("发生错误:"+data.status);
                        }
                    })
                }
			}
        })

});
</script>
<!--remove-->
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
		    <script type="text/javascript">
			    $(document).ready(function () {
			        $('#horizontalTab').easyResponsiveTabs({
			            type: 'default', //Types: default, vertical, accordion           
			            width: 'auto', //auto or any width like 600px
			            fit: true   // 100% fit in a container
			        });
			    });
				
</script>	
</head>
<body>
<!--header start here-->
<h1>登录注册</h1>
<div class="header agile">
	<div class="headder-main w3layouts">
      <div class="login agileinfo">
			<div class="sap_tabs">
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list w3">
						<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>登录</span></li>
						<li class="resp-tab-item" id="create" aria-controls="tab_item-1" role="tab"><span>注册</span></li>
						<div class="clearfix"></div>
					</ul>				  	 
					<div class="resp-tabs-container w3-agile">
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
							<div class="login-top">
								<form action="#" method="post">
									<h6>用户名</h6>
									<!--<input type="text" class="email" placeholder="Johnsmith@gmail.com" name="Johnsmith@gmail.com" required="">-->
									<input type="text"  class="username" placeholder="UserName" name="username" id="username" required="">
									<h6>密码</h6>
									<input type="password"  class="password" placeholder="Password" name="password" id="password" required="">
								<div class="login-bottom login-bottom1 w3ls">									
										<input type="button" id="login" value="登录"/>
									<br/>
									<span id="no" style="color: red"></span>
									   <a href="#"><h4>忘记密码</h4></a>
									 <!--<div class="social-btn">-->
									  <!--<a href="#" class="twitter">QQ</a>-->
									  <!--<a href="#" class="facebook">微信</a>-->
									 <!--</div>-->
								</div>	
								</form>
							</div>
						</div>
						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
						<div class="login-top wthree">
								<form action="#" method="post">
									<h6>用户名</h6>
									<input type="text" placeholder="UserName" name="username" id="regusername"  required="">
									<br>
									<span id="Isusername" style="color: red"></span>
									<h6>邮箱</h6>
									<input type="text" class="email" placeholder="Email" id="regemail"  name="Email">
									<br>
									<span id="Isemail" style="color: red"></span>
									<h6>密码</h6>
									<input type="password" class="password" placeholder="Password" id="regpassword" name="password">
									<h6>确认密码</h6>
									<input type="password" class="password confirm_password" placeholder="Confirm Password" id="conpass" name="password">
									<br>
									<span id="Isconpass" style="color: red"></span>
								<div class="login-bottom">									
										<input type="button" id="regist" value="注册">
									<div class="clear"></div>
								</div>	
						  </form>
							</div>
							
						</div>							
					</div>	
				</div>
			</div>	
		</div>	
    </div>
    <div class="close">
	<img src="images/cancel.png" alt="">
    </div>
</div>
<!--header end here-->
<!--copy rights end here-->
<!--<div class="copy-rights agileits">		 	-->
	<!--<p>© 2016 Flat Tab Forms. All Rights Reserved | Design by  <a href="https://shop303982252.taobao.com">源代码设计</a> </p>		 	-->
<!--</div>-->
<!--copyrights start here-->
</body>
</html>